<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="./css/aui.css" />
    <link rel="stylesheet" type="text/css" href="./css/aui-slide.css" />
    <link rel="stylesheet" type="text/css" href="./css/font-awesome.css" />
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
    <script type="text/javascript" src="./script/jquery.min.js"></script>
    <script type="text/javascript" src="./script/doT.min.js"></script>
    <script type="text/javascript" src="./script/base.js"></script>
    <script type="text/javascript" src="./script/api.js"></script>
    <script type="text/javascript" src="./script/aui-slide.js"></script>
  </head>

<body>
    <header class="header header-f" style="padding-top:2rem; height:4rem;">
        <div class="header-l aui-pull-left" onclick="closeWin()">
            <i class="fa fa-angle-left"></i>
        </div>
        <div class="header-title">
            支付订单
        </div>
        <div class="header-r aui-pull-right">
        </div>
    </header>
    <div style="height:4rem;"></div>

    <div class="goods-order-map aui-margin-b-15" tapmode onclick="address()">
        <div class="goods-order-map-l">
            <i class="fa fa-map-marker"></i>
        </div>
        <div class="goods-order-map-m">
            <!-- <p>请添加收货地址</p> -->
            <p>张先生<span>18888888888</span></p>
            <p>黑龙江省佳木斯市向阳区XX小区XX号楼XX单元XX号</p>
        </div>
        <div class="goods-order-map-r">
            <i class="fa fa-angle-right"></i>
        </div>
    </div>

    <div class="aui-content">
        <ul class="aui-list aui-list-in">
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">分销商城</div>
                </div>
            </li>
        </ul>
    </div>


    <div id="list">
    <div class="goods-order-goods">
        <img src="./images/goods-3.jpg">
        <dl>
            <dt>智能锁指纹智能锁</dt>
            <dd>
                规格：蓝色
                <p>￥1500<span>x1</span></p>
            </dd>
        </dl>
    </div>
    <div class="aui-content">
        <ul class="aui-list aui-list-in">
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">购买数量</div>
                </div>
                <div class="goods-order-num aui-pull-right">
                    <div class="jian"></div>
                    <input class="shu" type="text" value="1">
                    <div class="jia"></div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">快递费</div>
                    <div class="aui-list-item-right c-red">￥12.00</div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        买家留言：
                    </div>
                    <div class="aui-list-item-input">
                        <input type="text">
                    </div>
                </div>
            </li>
        </ul>
    </div>

    <div class="goods-details-buy-t"></div>
    <div class="goods-order-btn">
        <p>
            合计金额：<span>￥1512</span>
        </p>
        <button>提交订单</button>
    </div>

  </div>



  <script type="text/template" id="template">
    <div class="goods-order-goods">
        <img src="{{=it.orderList[0].order_image}}">
        <dl>
            <dt>{{=it.orderList[0].order_title}}</dt>
            <dd>
              {{~it.orderList[0].order_items[0].goods_options :value:index}}
              {{=value.name}}:{{=value.value}}
                {{~}}

                <p>￥{{=it.orderPrice}}<span>{{=it.orderSum}}</span></p>
            </dd>
        </dl>
    </div>
    <div class="aui-content">
        <ul class="aui-list aui-list-in">
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">购买数量</div>
                </div>
                <div class="goods-order-num aui-pull-right">
                    <div class="jian"></div>
                    <input class="shu" type="text" value="1" readonly="readonly">
                    <div class="jia"></div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">快递费</div>
                    <div class="aui-list-item-right c-red">￥{{=it.deliveryPrice}}</div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        买家留言：
                    </div>
                    <div class="aui-list-item-input">
                        <input type="text">
                    </div>
                </div>
            </li>
        </ul>
    </div>

    <div class="goods-details-buy-t"></div>
    <div class="goods-order-btn">
        <p>
            合计金额：<span>￥{{=it.payPrice}}</span>
        </p>
        <button onclick="pay()">提交订单</button>
    </div>

  </script>


</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript">
    apiready = function() {
       var quick =  api.pageParam.quick.quick;
        getData(quick);

        // alert(JSON.stringify(quick));
    }

// 520181207617913
// 520181207617913
    function getData(quick) {
      var userid = $api.getStorage('userid');
      var authtoken = $api.getStorage('authtoken');
      // alert(userid);

      api.ajax({
          url: webAddress+'/a/order/Cart/submit',
          // url: webAddress+'/a/order/Cart/index',
          method: 'post',
          headers:{
              // 'Content-Type':'application/json',
              TOKEN: token,
              authuid: userid,
              authtoken: authtoken
            },
          data: {
            values: {
              quick:quick,
            }
          }
      },function(ret, err){
          if (ret) {
            var order_no = ret.result.order_no;
              getPayFor(order_no);

          } else {
              alert( JSON.stringify( err ) );
          }
      });

    }



    function getPayFor(order_no) {
      var userid = $api.getStorage('userid');
      var authtoken = $api.getStorage('authtoken');
      api.ajax({
          url: webAddress+'/a/order/Pay/index',
          method: 'post',
          headers:{
              // 'Content-Type':'application/json',
              TOKEN: token,
              authuid: userid,
              authtoken: authtoken
            },
          data: {
              values: {
                   order_no: order_no
              },

          }
      },function(ret, err){
          if (ret) {
            // console.log(JSON.stringify(ret));
            var template = $api.byId('template');
            var dotFn = doT.template(template.innerHTML);
            var html = dotFn(ret.result);
            var list = $api.byId('list');
            $api.html(list, html);
          } else {
              alert( JSON.stringify( err ) );
          }
      });


    }

    function pay() {

      api.openWin({
          name: 'order_pay',
          url: './order_pay.html',
          pageParam: {
              name: 'test'
          }
      });



    }




    function address() {

        var delay = 0;
        if (api.systemType != 'ios') {
            delay = 300;
        }
        api.openWin({
            name: 'address',
            url: './address.html',
            bounces: false,
            delay: delay,
            slidBackEnabled: true,
            vScrollBarEnabled: false,
            progress: {
                type: "page"
            }
        });
    }

    function closeWin() {
        api.closeWin({});
    }
</script>

</html>
